<template>
	<view class="bannerpage">
		<view class="img">
			<image src="/static/imgs/图片 1@1x (1).png" mode=""></image>
		</view>
		
		<view class="title">
			积分商城
		</view>
		<view class="label">
			全新积分商城等你来哦
		</view>
		<view class="btnline">
			<view class="itembtn" @click="shenqingruzhu">
				申请入驻
			</view>
			<view class="itembtn" @click="shenqingtuiguang" v-if="showbtn">
				申请推广
			</view>
		</view>
		
		<view class="winpage" v-if="win1show||win2show||win3show">
			<view class="win1" v-if="win1show">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="topline">
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-zuanshihuiyuan"></view>
						</view>
						<view class="name">
							成为会员
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-qian"></view>
						</view>
						<view class="name">
							支付押金
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="yuan">
							<view class="iconfont icon-wenzhang"></view>
						</view>
						<view class="name">
							填写信息
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="yuan">
							<view class="iconfont icon-ren"></view>
						</view>
						<view class="name">
							提交申请
						</view>
					</view>
					
				</view>
				<view class="labelbox">
					<view class="label1">
						扫码缴费入住 会员￥{{huiyuanfei}}/月
					</view>
					<view class="title1">
						识别下方二维码缴费可成为会员，也可交付押金
					</view>
				</view>
				<view class="pickerbox">
					<picker @change="selecttype" :value="index1" :range="array" range-key="label">
						<view class="picker" >{{ array[index1] ? array[index1].label : '请选择充值时长' }}</view>
						
					</picker>
				</view>
				<view class="imgbox">
					<image v-if="zhifuurl" :src="'https://admin.caifubang.top/prod-api'+zhifuurl" @click="jiaofeiimg"></image>
				</view>
				<view class="pricetitle">
					当前{{ array[index1] ? array[index1].label : '请选择充值时长' }}应付 <view class="price">￥{{allprice}}</view>另付押金 <view class="price">￥{{yajin}}</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录(会员费、押金费)
					</view>
					<view class="imglist">
						<image v-if="zhifuimg" :src="'https://admin.caifubang.top/prod-api'+zhifuimg" mode=""></image>
						<view class="upbtn"  @click="uppayimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="pagebtn" @click="win1next">
					下一步
				</view>
			</view>
			<view class="win1" v-if="win2show">
				<view class="iconfont icon-guanbi guanbi" @click="win2show=false"></view>
				<view class="topline">
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-zuanshihuiyuan" ></view>
						</view>
						<view class="name">
							成为会员
						</view>
					</view>
					<view class="line aaa"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-qian"></view>
						</view>
						<view class="name">
							支付押金
						</view>
					</view>
					<view class="line aaa"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-wenzhang"></view>
						</view>
						<view class="name">
							填写信息
						</view>
					</view>
					<view class="line"></view>
					<view class="item">
						<view class="yuan">
							<view class="iconfont icon-ren"></view>
						</view>
						<view class="name">
							提交申请
						</view>
					</view>
					
				</view>
				<view class="formbox">
					<view class="formtitle">
						填写基本信息
					</view>
					<view class="line">
						<view class="labelname">
							商户名称
						</view>
						<input type="text" v-model="name" placeholder="填写姓名" />
					</view>
					<view class="line">
						<view class="labelname">
							手机号码
						</view>
						<input type="number" v-model="phone" maxlength="11" placeholder="填写手机号码" />
					</view>
					<view class="line">
						<view class="labelname">
							所属行业
						</view>
						<picker @change="selecthangye" :value="index2" :range="hangye" range-key="name">
							<view class="picker" >{{ hangye[index2] ? hangye[index2].name : '请选择行业' }}</view>
						</picker>
					</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传营业执照
					</view>
					<view class="imglist">
						<image v-if="zhizhaourl" :src="'https://admin.caifubang.top/prod-api'+zhizhaourl" mode=""></image>
						<view v-if="zhizhaourl==''"  class="upbtn" @click="upzhizhao">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传营业执照图片，保证图片真实，清晰
					</view>
				</view>
				
				<view class="upbox">
					<view class="putitle">
						上传收款二维码图片
					</view>
					<view class="imglist">
						<image v-if="shoukuanerweima" :src="'https://admin.caifubang.top/prod-api'+shoukuanerweima" mode=""></image>
						<view v-if="shoukuanerweima==''" class="upbtn" @click="uperweima">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传收款二维码图片，保证图片真实，清晰
					</view>
				</view>
						
		        <view class="idcarbox">
		        	<view class="idtitle">
		        		上传身份证头像面
		        	</view>
					<view class="cardbox">
						<view class="imgbox1">
							<image v-if="cardzheng" :src="'https://admin.caifubang.top/prod-api'+cardzheng" mode=""></image>
							<view v-if="cardzheng==''" class="upimg" @click="upcardzheng">
								
								<view class="iconfont icon-jia">
									
								</view>
								<view class="name">
									点击上传
								</view>
							</view>
						</view>
						<view class="imgbox1">
							<image src="/static/imgs/正面.png" mode=""></image>
						</view>
					</view>
					<view class="boxtitle">
						请按上图上传图片，并确保信息清晰
					</view>
		        </view>
				<view class="idcarbox">
					<view class="idtitle">
						上传身份证国徽面
					</view>
					<view class="cardbox">
						<view class="imgbox1">
							<image v-if="cardfan" :src="'https://admin.caifubang.top/prod-api'+cardfan" mode=""></image>
							<view v-if="cardfan==''"  class="upimg" @click="upcardfan">
								<view class="iconfont icon-jia">
									
								</view>
								<view class="name">
									点击上传
								</view>
							</view>
						</view>
						<view class="imgbox1">
							<image src="/static/imgs/反面.png" mode=""></image>
						</view>
					</view>
					<view class="boxtitle">
						请按上图上传图片，并确保信息清晰
					</view>
				</view>
			
				
		
				<view class="pagebtn" @click="win2next">
				提交审核
				</view>
			</view>
			
			<view class="win1" v-if="win3show">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="topline">
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-zuanshihuiyuan"></view>
						</view>
						<view class="name">
							成为会员
						</view>
					</view>
					<view class="line aaa"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-qian"></view>
						</view>
						<view class="name">
							支付押金
						</view>
					</view>
					<view class="line aaa"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-wenzhang"></view>
						</view>
						<view class="name">
							填写信息
						</view>
					</view>
					<view class="line aaa"></view>
					<view class="item">
						<view class="yuan act">
							<view class="iconfont icon-ren"></view>
						</view>
						<view class="name">
							提交申请
						</view>
					</view>
					
				</view>
		
		
				<view class="iconbox">
					<view class="iconfont icon-duigou-yuan">
						
					</view>
					<view class="win3title">
						提交成功
					</view>
					<view class="win3label">
						您已成功提交个人信息请耐心等待审核结果
					</view>
				</view>
				<view class="winbtn" @click="wanchengtiajiao">
			    完成
				</view>
			</view>
		</view>
		<view class="winpage" v-if="win4show||win5show">
			<view class="win1" v-if="win4show">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				<view class="labelbox">
					<view class="label1">
						扫码购买积分￥{{jifen}}
					</view>
					<view class="title1">
						识别下方二维码缴费购买积分可申请推广
					</view>
				</view>
		
				<view class="imgbox">
					<image  :src="'https://admin.caifubang.top/prod-api'+tuiguangerweima" @click="chengweituiguang"></image>
				</view>
				<view class="pricetitle">
					购买{{jifen}}积分  应付 <view class="price">￥{{jifen}}</view>
				</view>
				<view class="upbox">
					<view class="putitle">
						上传支付记录
					</view>
					<view class="imglist" >
						<image v-if="payjifenurl" :src="'https://admin.caifubang.top/prod-api'+payjifenurl" mode=""></image>
						<view v-if="payjifenurl==''" class="upbtn" @click="upjifenimg">
							+
						</view>
					</view>
					<view class="imglabel">
						点击上传支付记录图片，保证图片真实，清晰
					</view>
				</view>
				<view class="pagebtn" @click="tuiguangtijiao">
				  提交审核
				</view>
			</view>
			<view class="win1" v-if="win5show">
				<view class="iconfont icon-guanbi guanbi" @click="guanbi"></view>
				
				<view class="iconbox">
					<view class="iconfont icon-duigou-yuan">
						
					</view>
					<view class="win3title">
						提交成功
					</view>
					<view class="win3label">
						您已成功提交个人信息请耐心等待审核结果
					</view>
				</view>
				<view class="winbtn" @click="wanchengtiajiao">
				完成
				</view>
				
					</view>
				
		</view>
	</view>
</template>

<script>
	 import {getSysConfigByTypeByS,industryTypes,RZSHMemberSubmit,getSysConfigByType,CwMemberTSubmit} from '../../utils/api.js'
	export default {
		data() {
			return {
				showbtn:true,
				tuiguangerweima:'',
				payjifenurl:'',
				huiyuanfei:'',
			    zhifuurl:'',
				zhifuimg:'',
				yajin:'',
				name:'',
				phone:'',
				zhizhaourl:'',
				shoukuanerweima:'',
				cardzheng:'',
				cardfan:'',
				win1show:false,
				win2show:false,
				win3show:false,
				win4show:false,
				win5show:false,
				index1:'0',
				index2:'',
				jifen:'',
				hangye:[],
				array:[
					{
						type:3,
						label:'3个月'
					},
					{
						type:4,
						label:'4个月'
					},
					{
						type:5,
						label:'5个月'
					},
					{
						type:6,
						label:'6个月'
					},
					{
						type:7,
						label:'7个月'
					},
					{
						type:8,
						label:'8个月'
					},
					
					{
						type:9,
						label:'9个月'
					},
					
					{
						type:10,
						label:'10个月'
					},
					{
						type:11,
						label:'11个月'
					},
					
					{
						type:12,
						label:'12个月'
					}
				]
			}
		},
	computed: {
	    allprice() {
	      // 防止 index 越界或 type 为空
	      if (this.array[this.index1] && this.array[this.index1].type) {
	        return this.huiyuanfei * this.array[this.index1].type
	      }
	      return 0
	    }
	  },
	  onLoad(e) {
	  	if(e.show){
			this.showbtn=false
		}
	  },
		methods: {
			
			jiaofeiimg() {
			  let that = this;
			  let list = [];
			  list.push('https://admin.caifubang.top/prod-api' + that.zhifuurl);
			
			  uni.previewImage({
			    urls: list, // 预览图片数组
			    longPressActions: {
			      itemList: ['发送给朋友', '保存图片', '收藏'],
			      success: function (data) {
			        console.log(
			          '选中了第' +
			            (data.tapIndex + 1) +
			            '个按钮, 第' +
			            (data.index + 1) +
			            '张图片'
			        );
			      },
			      fail: function (err) {
			        console.log(err.errMsg);
			      }
			    }
			  });
			},
			
			
			chengweituiguang() {
			  let that = this;
			  let list = [];
			  list.push('https://admin.caifubang.top/prod-api' + that.tuiguangerweima);
			
			  uni.previewImage({
			    urls: list, // 预览图片数组
			    longPressActions: {
			      itemList: ['发送给朋友', '保存图片', '收藏'],
			      success: function (data) {
			        console.log(
			          '选中了第' +
			            (data.tapIndex + 1) +
			            '个按钮, 第' +
			            (data.index + 1) +
			            '张图片'
			        );
			      },
			      fail: function (err) {
			        console.log(err.errMsg);
			      }
			    }
			  });
			},
			wanchengtiajiao(){
				uni.switchTab({
					url:'/pages/center/center'
				})
			},
			tuiguangtijiao(){
				if(this.payjifenurl==''){
					uni.showToast({
						title: '上传支付截图',
						icon:'none',
						duration: 2000
					});
					return
				}
				let p={
					promoterFeeScreenshot:this.payjifenurl
				}
				CwMemberTSubmit(p).then(res=>{
					if(res.data.code==200){
						this.win4show=false,
						this.win5show=true
					}
				})
			
			},
			
			//申请推广
			shenqingtuiguang(){
				this.win4show=true
				let p={
						type:2
					}
				getSysConfigByTypeByS(p).then(res=>{
					console.log(res,'配置项')
					this.jifen=res.data.data.member_promoterfree
					this.tuiguangerweima=res.data.data.platform_ercode
				})
			},
			
			
			win1next(){
				if(this.zhifuimg==''){
					uni.showToast({
						title: '请上传支付截图',
						icon:'none',
						duration: 2000
					});
					return
				}
				
				this.win1show=false
				this.win2show=true
				 this.gethangye()
			},
			win2next(){
				if(this.index2 ===''){
					uni.showToast({
						title: '请选择行业',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.cardzheng==''){
					uni.showToast({
						title: '请上传身份证正面',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.cardfan ==''){
					uni.showToast({
						title: '请上传身份证反面',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.name ==''){
					uni.showToast({
						title: '请填写商户名称',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.phone ==''){
					uni.showToast({
						title: '请填写手机号',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.zhizhaourl ==''){
					uni.showToast({
						title: '请上传营业执照',
						icon:'none',
						duration: 2000
					});
					return
				}
				if(this.shoukuanerweima ==''){
					uni.showToast({
						title: '请上传收款二维码',
						icon:'none',
						duration: 2000
					});
					return
				}
				
			
				
				
				let p={
					payFeeScreenshot:this.zhifuimg,
					pay_month:this.array[this.index1].type,
					id_card_front:this.cardzheng,
					id_card_back:this.cardfan,
					merchant_name:this.name,
					merchantPhone:this.phone,
					deposit:this.yajin,
					deposit_payment_screenshot:this.zhifuimg,
					business_license:this.zhizhaourl,
					industry_type_id:this.hangye[this.index2].id,
					collectionQrCode:this.shoukuanerweima
				}
				RZSHMemberSubmit(p).then(res=>{
					console.log(res,'提交入驻资料')
					if(res.data.code==200){
						this.win2show=false
						this.win3show=true
				
						uni.showModal({
							title: '提示',
							content: '请保存好支付截图，防止审核失败，需要重新提交',
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				})
				
			},
			guanbi(){
				this.win1show=false
				this.win2show=false
				this.win3show=false
				this.win4show=false
				this.win5show=false
			},
			selecttype(e){
				
				this.index1=e.detail.value
			},
			selecthangye(e){
				this.index2=e.detail.value
				console.log(this.index2,'这是选择行业')
			},
			
			//申请入驻
			shenqingruzhu(){
				this.win1show=true
				let p={
					type:1
				}
	        getSysConfigByTypeByS(p).then(res=>{
				console.log(res,'配置项')
				this.yajin=res.data.data.deposit_amount
				this.zhifuurl=res.data.data.platform_ercode
				this.huiyuanfei=res.data.data.member_shiptc
			})
				
			},
			
			//上传支付截图
			uppayimg(){
				// this.imgurl= "/profile/upload/2025/09/12/860678076395534_1_20250912112842A004.png"
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.zhifuimg= JSON.parse(uploadRes.data).data.fileName
												 
												 console.log('上传成功', that.imgurl)
										        }
										      })}
				});
			},
			
			//上传营业执照
			upzhizhao(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.zhizhaourl= JSON.parse(uploadRes.data).data.fileName
										        }
							 })}
				});
			},
			
			//上传收款二维码
			uperweima(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.shoukuanerweima= JSON.parse(uploadRes.data).data.fileName
										        }
							 })}
				});
			},
			
			//上传身份证正面
			upcardzheng(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.cardzheng= JSON.parse(uploadRes.data).data.fileName
										        }
							 })}
				});
			},
			//上传身份证正面
			upcardfan(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.cardfan= JSON.parse(uploadRes.data).data.fileName
										        }
							 })}
				});
			},
			
			//上传购买积分截图
			upjifenimg(){
				let that=this
				uni.chooseImage({
					count: 1, 
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
					   const file = res.tempFiles[0]  // File 对象
					      console.log(file)
										   uni.uploadFile({
										        url: 'https://admin.caifubang.top/prod-api/system/WeChatPublicApi/uploadImage',
										        file: file,                     // H5 用
										        name: 'file',
												 header: {
												    Authorization: 'Bearer ' + uni.getStorageSync('token'), 
												  },
										        success: (uploadRes) => {
												 that.payjifenurl= JSON.parse(uploadRes.data).data.fileName
										        }
							 })}
				});
			},
			//获取行业
			gethangye(){
				industryTypes().then(res=>{
					
					this.hangye=res.data.data
				
				})
			},
		}
	}
</script>

<style lang="less" scoped>
.bannerpage{
	width: 750rpx;
	padding-top: 150rpx;
	.img{
		width: 600rpx;
		height:600rpx;
		margin: auto;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.title{
		text-align: center;
		margin-top: 50rpx;
		font-size: 36rpx;
	}
	.label{
		text-align: center;
		margin-top: 50rpx;
		font-size: 32rpx;
	}
	.btnline{
		width: 100%;
		margin-top: 100rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-evenly;
		.itembtn{
			width: 250rpx;
			height: 70rpx;
			border: #FF6D00 1px solid;
			text-align: center;
			line-height: 70rpx;
			color: #FF6D00;
			border-radius: 35rpx;
		}
	}
	.winpage{
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		box-sizing: border-box;
		.win1{
			width: 100%;
			height: 90vh;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: white;
			border-top-right-radius: 20rpx;
			border-top-left-radius: 20rpx;
			overflow-y: auto;
			.guanbi{
			  position: absolute;
			  right: 10rpx;
			  top: 10rpx;
			}
			.topline{
				width: 100%;
				display: flex;
				align-items: center;
				margin-top: 50rpx;
				box-sizing: border-box;
				padding: 20rpx;
				.item{
					width: 14.5%;
					text-align: center;
					font-size: 24rpx;
					.yuan{
						margin: auto;
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
						line-height: 60rpx;
						background-color: #EAEAEA ;
						
						.iconfont{
							margin: auto;
							color: #C3C3C3 ;
						}
					}
					.act{
						background-color: #FBE5D6 ;
						.iconfont{
							color: #FF6D00;
						}
					}
					
					
				}
				.line{
					width: 14%;
					border-top: 1rpx solid gray;
					margin-bottom: 30rpx;
				}
				.aaa{
					border-top: 1rpx solid orange;
				}
			}
			.labelbox{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				margin-top: 50rpx;
				text-align: left;
				line-height: 2;
				.label1{
					font-weight: bold;
					text-align: left;
				}
				.title1{
					font-size: 30rpx;
					text-align: left;
					color: #ADADAD ;
				}
			}
			.pickerbox{
				width: 100%;
				.picker{
					width: 90%;
					height: 60rpx;
					line-height: 60rpx;
					margin: auto;
					background-color: #F4F4F4 ;
					padding: 0 20rpx;
				}
			}
			.imgbox{
				margin: 40rpx auto;
				width: 300rpx;
				height: 300rpx;
				border: 10rpx solid orange;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.pricetitle{
				display: flex;
				align-items: center;
				text-align: center;
				margin: auto;
				width: 100%;
				justify-content: center;
				.price{
					font-weight: bold;
					color: #FF2E00;
				}
			}
			.upbox{
				width: 90%;
				margin: auto;
				background-color: #F4F4F4;
				box-sizing: border-box;
				padding: 20rpx;
				.uptitle{
					font-weight: bold;
				}
				.imglist{
					width: 100%;
					display: flex;
					align-items: center;
					
					image{
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin: 10rpx;
					}
					.upbtn{
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						margin: 10rpx;
						line-height: 150rpx;
						text-align: center;
						font-size: 88rpx;
						background-color: white;
                        color: gray;
					}
				}
				.imglabel{
					color: gray;
					font-size: 28rpx;
				}
			}
			
			.formbox{
				width: 90%;
				margin: 70rpx auto;
				.formtitle{
					font-weight: bold;
				}
				.line{
					display: flex;
					align-items: center;
					height: 80rpx;
					line-height: 80rpx;
					border-bottom: 1rpx solid whitesmoke;
					.labelname{
						height: 80rpx;
						width: 150rpx;
						line-height: 80rpx;
						
					}
					input{
						height: 80rpx;
						width: 300rpx;
						line-height: 80rpx;
						
					}
					.picker{
						height: 80rpx;
						width: 300rpx;
						line-height: 80rpx;
						
					}
				}
			}
			.idcarbox{
				width: 100%;
				box-sizing: border-box;
				padding: 20rpx;
				margin: 40rpx 0;
				.idtitle{
					font-weight: bold;
					line-height:2;
				}
				.cardbox{
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.imgbox1{
						width: 350rpx;
						height: 250rpx;
						background-color: #CdcdCd;
						border-radius: 20rpx;
						.upimg{
							margin: auto;
							text-align: center;
							color: gray;
							margin-top: 100rpx;
						}
						image{
							width: 100%;
							height: 100%;
							border-radius: 20rpx;
						}
					}
					
				}
				.boxtitle{
					color: gray;
					font-size: 28rpx;
				}
			}
			.pagebtn{
				width: 90%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				margin:100rpx auto;
				border-radius: 40rpx;
				color: white;
				background-color: #FF5C00 ;
			}
			.iconbox{
				width: 36%;
				margin: 200rpx auto;
				.iconfont{
					font-size: 60rpx;
					font-weight: bold;
					color: #FF5C00 ;
					margin: auto;
					text-align: center;
				}
				.win3title{
					color: #FF5C00;
					margin: 30rpx;
					text-align: center;
				}
				.win3label{
					text-align: center;
					font-size: 28rpx;
					color: #ADADAD ;
					font-weight: bold;
				}
			}
			.winbtn{
				width: 450rpx;
				height: 70rpx;
				border-radius: 10rpx;
				text-align: center;
				line-height: 70rpx;
				margin: auto;
				color: #FF5C00 ;
				border: 1rpx solid #FF5C00;
			}
		}

		
	}
}
</style>
